<template>
    <div class="cp-grid-table" @click="warpClick">
        <div class="topShowWarp" v-if="!tableOnly">
            <!-- 顶部部件区START -->
            <transition :name="topShow?'transright':''">
                <div class="wedgets" v-show="topShow">

                    <!-- 表格标题START -->
                    <div class="heading">
                        <span v-if="title">{{title}}</span>
                        <div class="titleHandle">
                            <slot name="titleHandle"></slot>
                        </div>
                    </div>
                    <!-- 表格标题END -->
                    <!-- 已选过滤条件START -->
                    <div class="grid-selected-conditions">
                        <span class="tip filter-sort" v-if="queryData.sort" @click="removeFilter('sort')">
                            <!-- 排序 -->
                            {{queryData.sort.split('|')[1]}}：
                            <i class="highlight">{{queryData.sort.split('|')[0] == 'ASC' ? '升序' : '降序'}}</i>
                            <i class="x"></i>
                        </span>
                        <div class="move-panel" v-show="(queryData.searchList && queryData.searchList.length>0) || (checkedKeys && checkedKeys.length > 0) || queryData.tree.value || (queryData.rangeList && queryData.rangeList.length>0) || (queryData.timeList && queryData.timeList.length>0)">
                            <span class="m-l" @click="move(0)"></span>
                            <div class="tips">
                                <ul id="move-list">
                                    <!-- 搜索 -->
                                    <li v-for="(item,index) in queryData.searchList" :key="index" @click="removeFilter('search',item.name)">
                                        <span class="tip" :title="item.displayName">{{item.displayName}}：
                                            <i class="highlight" :title="item.value">{{item.value}}</i>
                                            <i class="x"></i>
                                        </span>
                                    </li>
                                    <!-- 区间 -->
                                    <li v-for="(item,index) in queryData.rangeList" :key="index" @click="removeFilter('range',item.name)">
                                        <span class="tip" :title="item.displayName">{{item.displayName}}：
                                            <i class="highlight" :title="getRangTitle(item[item.name+'Begin'],item[item.name+'End'])">{{item[item.name+'Begin']?item[item.name+'Begin']:0}}{{(item[item.name+'End']
                                                || item[item.name+'End']==0)?'~'+item[item.name+'End']:'到~'}}</i>
                                            <i class="x"></i>
                                        </span>
                                    </li>
                                    <!-- 日期 -->
                                    <li v-for="(item,index) in queryData.timeList" :key="index" @click="removeFilter('timepicker',item.name)">
                                        <span class="tip" :title="item.displayName">{{item.displayName}}：
                                            <i class="highlight" :title="item[item.name+'Begin']+'至'+item[item.name+'End']">{{item[item.name+'Begin']}}至{{item[item.name+'End']}}</i>
                                            <i class="x"></i>
                                        </span>
                                    </li>
                                    <!-- 单选/多选 -->
                                    <li v-if="queryData.checked[key] && queryData.checked[key].split('|')[1]" v-for="(key,index) in checkedKeys" @click="removeFilter('checked', key)"
                                        :key="index">
                                        <span class="tip" :title="queryData.checked[key].split('|')[2]">{{queryData.checked[key].split('|')[2]}}：
                                            <i class="highlight" :title="queryData.checked[key].split('|')[1]">{{queryData.checked[key].split('|')[1]}}</i>
                                            <i class="x"></i>
                                        </span>
                                    </li>
                                    <!-- 组织结构 caseBelong 名称暂时固定！ todo-->
                                    <li v-if="queryData.tree.value" @click="removeFilter('tree', 'caseBelong')">
                                        <span class="tip" :title="queryData.tree.displayName">{{queryData.tree.displayName}}：
                                            <i class="highlight" :title="queryData.tree.name">{{queryData.tree.name}}</i>
                                            <i class="x"></i>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                            <span class="m-r" @click="move(1)"></span>
                            <!-- v-show="checkedKeys.length+(queryData.search.value?1:0) > 3" -->
                        </div>
                    </div>
                    <!-- 已选过滤条件END -->
                    <!-- 右侧按钮插槽START -->
                    <div class="grid-wedget-button">
                        <slot name="grid-wedget-button"></slot>
                    </div>
                    <!-- 右侧按钮插槽END -->
                </div>
            </transition>
            <!-- 顶部部件区END -->
            <!-- 选择复选框/单选框之后，操作面板START -->
            <transition :name="topShow2?'transleft':''">
                <div class="operation" v-show="topShow2">
                    <ul>
                        <li>已选
                            <span style="color: #02b0f0;margin:0 2px">{{checkedItemCount}}</span>个</li>
                        <!-- <li class="op-btn op-btn-edit" v-if="checkable.split('|').indexOf('edit') != -1">编辑</li> -->
                        <li class="op-btn op-btn-delete" v-if="/delete:/.test(checkable)" @click="deleteRow">删除</li>
                        <!-- 左侧按钮插槽START -->
                        <div class="grid-wedget-left-button">
                            <slot name="grid-wedget-left-button"></slot>
                        </div>
                        <!-- 左侧按钮插槽END -->
                    </ul>
                    <span class="op-btn op-btn-cancel" @click="unCheckAll"></span>
                </div>
            </transition>
            <!-- 选择复选框/单选框之后，操作面板END -->
        </div>
        <div v-if="shortallCustomerIds.length > 0" class="allchecked">
            <Button @click="checkAlles" type="success" class="button_allot" style="margin-right:3px;">{{whetherchecktitle}}</Button>
        </div>
        <!--<div class="unallchecked">
            <Button type="success" class="button_allot" style="margin-right:3px;">取消全选</Button>
        </div>-->
        <!-- 二级的筛选条件插槽START -->
        <div class="grid-wedget-operation" v-if="operation">
            <slot name="grid-wedget-operation"></slot>
        </div>
        <!-- 表格START -->
        <div class="grid-table" :class="operation?'grid-table-hasOperation':''" :style="tableBottom">
            <div class="grid-table-container" id="grid-table-container" :style="tableMinWidth">
                <div class="grid-thead" v-show="thead && thead.length>0">
                    <Row type="flex" justify="space-around">
                        <div class="checkboxWarp">
                            <i v-if="checkable || hasCheckbox" :class="[checkable || hasCheckbox ? 'checkbox' : '', itemAllChecked ? 'checkbox-checked' : '', hasItemChecked && !itemAllChecked ? 'checkbox-part-checked' : '']"
                                @click="checkAll"></i>
                            <span class="index">序号</span>
                        </div>
                        <Col span="1" v-for="(th, th_index) in thead" :key="th_index" v-if="th.visible" :name="th.name" class="grid-flex-col">
                        <div class="grid-table-th">
                            <span :class="filterable && !getFilterType(th)['empty'] && th.searchable?'column-title':'column-title noSearchable'" :title="th.displayName">{{th.displayName}}</span>
                            <!-- 高级筛选  && th.searchable -->
                            <div v-if="filterable && !getFilterType(th)['empty'] && th.searchable" class="grid-filter-container" @mouseover="showfilter(th)"
                                @mouseleave="hidefilter(th)">
                                <grid-filter ref="filters" :classes="[th.showFilter ? 'active' : '']" :options="getFilterType(th)" :queryData="queryData"
                                    v-on:filter="filter" :seachMaxlength="seachMaxlength"></grid-filter>
                            </div>
                        </div>
                        </Col>
                        <!-- 操作 -->
                        <div class="checkboxWarp processOperation" v-if="processOperation">
                            <span class="index">流程操作</span>
                        </div>
                        <div class="checkboxWarp processOperation" v-if="BonusOperation">
                            <span class="index">操作</span>
                        </div>
                        <!-- 设置按钮 -->
                        <Col span="1" v-if="setting" class="last-child">
                        <i class="setting" @click="showSetting = !showSetting"></i>
                        </Col>
                        <div class="w10"></div>
                    </Row>
                </div>

                <div class="grid-tdata" v-if="tdata.length > 0" :class="count?'b89':''">
                    <div class="grid-row" v-for="(td, index) in tdata" :key="index" @click="clickRow($event, td, index)" :class="{ 'active' : rowClickedIndex === index, 'grid-row_nocursor': nocursor ==true }">
                        <Row type="flex" justify="space-around" >
                            <div class="checkboxWarp">
                                <i v-if="checkable || hasCheckbox" :class="[checkable || hasCheckbox ? 'checkbox' : '', td.checked ? 'checkbox-checked' : '']"
                                    @click="checkItem($event, td)"></i>
                                <span class="index" v-if="isPager">{{pagerData.startRow + index}}</span>
                                <span class="index" v-else>{{1 + index}}</span>
                            </div>
                            <Col span="1" v-for="(th, index_th) in thead" :key="index_th" v-if="th.visible" class="grid-flex-col" :class="th.click && clickTD && getTdString(td[th.name], th.name)!==0?'grid-flex-col_hover':''">
                            <div class="grid-flex-col_div" @click="th.click && clickTD && getTdString(td[th.name], th.name)!==0?handleTDClick($event, td,th):''">
                                <span v-if="th.name === 'bonusState'" :title="td.bonusState=='0' ? '未提交':td.bonusState=='1' ?  '审核中' : td.bonusState=='2' ? '已审核':'已驳回'">{{ td.bonusState=='0' ? '未提交':td.bonusState=='1' ? '审核中' : td.bonusState=='2' ? '已审核':'已驳回'}}</span>
                                <span v-if="typeof td[th.name] === 'string'" :title="th?getTdString(td[th.name], th.name):''">{{ th?getTdString(td[th.name], th.name):'' }}</span>
                                <span v-if="typeof td[th.name] === 'number'&&th.name!=='bonusState'" :title="th?getTdNumber(td[th.name], th.name):''">{{ th?getTdNumber(td[th.name], th.name):'' }}</span>
                                <span v-if="Array.isArray(td[th.name])" :title="th?getTdArray(td[th.name], th.name):''">{{ th?getTdArray(td[th.name], th.name):'' }}</span>
                                <span v-if="typeof td[th.name] === 'object'" :title="th?getTdObject(td[th.name],th.dataType):''">{{ th?getTdObject(td[th.name],th.dataType):'' }}</span>


                                <Tooltip :content="td.tipMessage" placement="top" v-if="th.tipMessage && td.tipMessage">
                                    <i class="tip_icon" v-if="th.tipMessage && td.tipMessage"></i>
                                </Tooltip>


                            </div>
                            </Col>
                            <!-- 操作 -->
                            <div class="checkboxWarp processOperation" v-if="processOperation">
                                <span class="index step" @click="operationOne($event, td, index)" v-if="productIntention!=2">打回</span>
                                <span class="index step" @click="operationTwo($event, td, index)" v-if="hasNext">下一步</span>
                            </div>
                            <div class="checkboxWarp processOperation" v-if="BonusOperation">
                                <span class="index step" @click="changeName($event, td, index)">更名</span>
                                <span class="index step" v-show='td.bonusState==0' @click="changeSubmit($event, td, index)">提交</span>
                                <span class="index step" v-show='td.bonusState==1' @click="withdraw($event, td, index)">撤回</span>
                                <span class="index step" @click="processInfo($event, td, index)">流程信息</span>
                            </div>
                            <Col span="1" v-if="setting"></Col>
                        </Row>
                    </div>
                </div>
                <!-- 合计START -->
                <div class="grid-tCout" v-if="count">
                    <div class="grid-row">
                        <Row type="flex" justify="space-around">
                            <div class="checkboxWarp"></div>
                            <Col span="1" v-for="(th, th_index) in thead" :key="th_index" class="grid-flex-col" v-if="th_index==0">{{countTitle}}</Col>
                            <Col span="1" v-for="(th, th_index) in thead" :key="th_index" class="grid-flex-col" v-if="th_index>0 && th.visible">
                            <span class="col-span" v-if="th.gridTableCount || th.gridTableCount == 0" :title="th.gridTableCount">
                                <i v-if="countFormart == 'moneyFormart'">{{th.gridTableCount | moneyFormart}}</i>
                                <i v-if="countFormart == 'moneyFormart_toFixed4'">{{th.gridTableCount | moneyFormart_toFixed4}}</i>
                            </span>
                            <span v-else>--</span>
                            </Col>
                            <Col span="1" v-if="setting"></Col>
                            <div class="w10"></div>
                        </Row>
                    </div>
                </div>
                <!-- 合计END -->
                <div v-if="!loading && (tdata && tdata.length < 1 )" class="gridTablenodata">
                    <div class="alert">
                        <i></i>
                        {{nodata_child}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页START -->
        <div class="grid-tfoot" v-if="isPager">
            <Row>
                <div class="clear"></div>
                <div class="totalCount">当前第 {{pagerData.startRow}} 到第 {{pagerData.endRow}} 条，共 {{pagerData.total}} 条</div>
                <Page ref="refPager" :total="pagerData.total" :pageSize="pagerData.rows" class="pager" show-sizer :pageSizeOpts="pagerData.rowOptions"
                    placement="top" show-elevator @on-change="pageChange" @on-page-size-change="rowChange"></Page>
            </Row>
        </div>
        <!-- 分页END -->
        <!-- 表格END -->
        <!-- 加载中START -->
        <div v-if="loading" class="loadingwarp">
            <div class="gridTableloading">
                <div class="gridTableDemo-spin-col">
                    <Spin fix>
                        <Icon type="load-c" size=22 class="demo-spin-icon-load"></Icon>
                        <div>正在加载</div>
                    </Spin>
                </div>
            </div>
        </div>
        <!-- 加载中END -->
        <!-- 表格设置START -->
        <Modal title="编辑显示字段" v-model="showSetting" :mask-closable="false" width="730" @on-ok="saveSetting" @on-cancel="cancelSetting"
            data-test="modal_grid-setting">
            <div class="grid-setting">
                <div class="inner">
                    <div class="bd">
                        <div class="list-left">
                            <h3>隐藏选项</h3>
                            <div class="items" @dragover="dragover" @drop="drop" id="hiddenList">
                                <ul>
                                    <li v-for="(item, index) in hiddenList" :key="index" @click="check(item)" @dragstart="dragstart" dragend="dragend" draggable="true"
                                        :transdata="'hiddenList|' + index">
                                        <i class="checkbox" :class="{ 'checkbox-checked': item.checked }"></i>
                                        <label>{{item.displayName}}</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="mid">
                            <span :class="hasCheck_visibleList?'to-l to-hover':'to-l'" @click="transfer(1)"></span>
                            <span :class="hasCheck_hiddenList?'to-r to-hover':'to-r'" @click="transfer(2)"></span>
                        </div>
                        <div class="list-right">
                            <h3>显示选项</h3>
                            <div class="items" @dragover="dragover" @drop="drop" id="visibleList">
                                <ul>
                                    <li v-for="(item, index) in visibleList" :key="index" @click="check(item)" @dragstart="dragstart" dragend="dragend" draggable="true"
                                        :transdata="'visibleList|' + index">
                                        <i class="checkbox" :class="{ 'checkbox-checked': item.checked }"></i>
                                        <label>{{item.displayName}}</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="sort">
                            <span class="up" @click="sort(1)"></span>
                            <span class="down" @click="sort(2)"></span>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
        <!-- 表格设置END -->
    </div>
</template>
<script>
    import Vue from 'vue'
    
    import Rest from '@/rest'
    import Helper from '@/common/helper'
    import gridFilter from './grid_filter'
   // import Bus from '@/store/bus'
    import Api from '@/api'

    export default {
        name: 'gridTable',
        data() {
            return {
                nodata_child: '',
                                intimes: 1,
                topShow: true, // 多选操作动画用
                topShow2: false, // 多选操作动画用
                hasCheck_hiddenList: false, //隐藏选项是否有选中项
                hasCheck_visibleList: false, //显示选项是否有选中项
                hasItemChecked: false, // 是否部分选中
                itemAllChecked: false, // 是否全选
                itemAllpageChecked: false, // 是否全选(包括分页内未加载)
                showOperation: false, // 是否显示表格操作栏
                checkedItemCount: 0, // 选中个数
                whetherchecktitle: '全部选择',
                thead: [], // 表格头部
                tdata: [], // 表格数据
                allCustomerIds: [], //存储返回所有客户allCustomerIds
                shortallCustomerIds: [], //临时存储增删所有客户allCustomerIds
                allCustomerDemandIds: [], //存储返回所有客户allCustomerDemandIds
                shortallCustomerDemandIds: [], //临时存储增删所有客户allCustomerDemandIds
                visibleList: [], // 显示选项列表
                hiddenList: [], // 隐藏选项列表
                showFilter: false, // 是否显示高级筛选
                showSetting: false, // 是否显示表格设置弹窗
                isCheckAll: false, // 表格行: 是否已全选
                dropTargetIndex: '', // drop的目标索引信息，可以根据这个信息知道拖动释放在什么位置上
                rowClickedIndex: '', // 被选中的行索引
                theadSource: 'api/v1/tb_query_defs/',
                countList: [],
                loading: false,
                pagerData: {
                    page: 1, // 第几页
                    rows: 30, // 每页30条
                    startRow: 0, // 起始条数
                    endRow: 0, // 结束条数
                    total: 0, // 总数据量
                    lastPage: false, // 是否已经是最后一页
                    rowOptions: [10, 15, 30, 50] // 每页条数切换的配置
                },
                queryData: { // 高级搜索查询数据
                    sort: '',
                    search: {
                        value: '',
                        name: '',
                        displayName: ''
                    },
                    checked: {},
                    tree: {
                        key: 'orgIds',
                        value: '',
                        name: '',
                        displayName: ''
                    },
                    range: {
                        name: '',
                        displayName: '',
                        rangeBegin: 0,
                        rangeEnd: 0
                    },
                    timepicker: {
                        name: '',
                        displayName: '',
                        timeStart: 0,
                        timeEnd: 0
                    },
                    searchList: [],
                    timeList: [],
                    rangeList: []
                },
                checkedKeys: [], // 高级搜索选中的keys列表，即queryData.checked对象的keys列表
                dicFields: [], // 记录字典字段
                dicObjs: [], // 记录字典数据对象
                nodataBackup: '',
            }
        },
        computed: {
            tableMinWidth: function () {
                var thlen = this.thead.length;
                var width = 0;
                var minwidth = 900;
                for (var i = 0; i < thlen; i++) {
                    if (this.thead[i].visible == true) {
                        // 根据数据类型定义宽度
                        // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；
                        // 6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
                        switch (this.thead[i].dataType) {
                            case 1:
                            case 12:
                            case 11:
                                width = width + 240;
                                break;
                            case 2:
                            case 3:
                            case 4:
                            case 5:
                            case 6:
                            case 7:
                                width = width + 170;
                                break;
                            case 8:
                            case 9:
                                width = width + 150;
                                break;
                            case 10:
                                width = width + 130;
                                break;
                        }
                    }
                }
                if (this.filterable) {
                    width = width > minwidth ? width : minwidth;
                } else { // 适合弹框类
                    width = 600;
                }
                return 'min-width:' + width + 'px';
            },
            tableBottom: function () {
                if (this.isPager) {
                    return 'bottom:78px';
                } else {
                    return 'bottom:20px';
                }
            }
        },
        methods: {
            // 阻止冒泡
            warpClick() {},
            showfilter(th) {
                var that = this;
                clearTimeout(th.timeout);
                th.timeout = setTimeout(() => {
                    th.showFilter = true;
                }, 50)
            },
            hidefilter(th) {
                var that = this;
                clearTimeout(th.timeout);
                th.timeout = setTimeout(() => {
                    th.showFilter = false;
                }, 100);
            },
            // 表头数据初始化
            init() {
                var _this = this
                var url = '';
                _this.whetherchecktitle = '全部选择';
                                _this.pagerData={
                                        page: 1, // 第几页
                                        rows: 30, // 每页30条
                                        startRow: 0, // 起始条数
                                        endRow: 0, // 结束条数
                                        total: 0, // 总数据量
                                        lastPage: false, // 是否已经是最后一页
                                        rowOptions: [10, 15, 30, 50] // 每页条数切换的配置
                                },
                                _this.itemAllChecked=false;
                                _this.itemAllpageChecked=false;
                                _this.hasItemChecked=false
                _this.topShow = true;
                _this.topShow2 = false;
                                _this.checkedItemCount=0;
                _this.allCustomerIds = _this.shortallCustomerIds = [];
                _this.thead = []; // 表格头部
                _this.tdata = []; // 表格数据
                _this.checkedKeys = [];
                _this.nodataBackup = _this.nodata;
                _this.nodata_child = _this.nodata;
                _this.closeFilter();
                if (this.checkable) {
                    // 序列化checkable:
                    // delete:api/v1/abc?a=b -> { delete: { api: 'api/v1/abc', query: 'a', alias: 'b' } }
                    // a为api中的查询字段，b为tdata中的查询字段
                    var o = {}
                    var urls = this.checkable.split(',')
                    urls.forEach(function (url) {
                        var s = url.split(':')
                        o[s[0]] = {}
                        if (s[1].indexOf('?') !== -1) {
                            var x = s[1].split('?')
                            o[s[0]].api = x[0]
                            if (x[1]) {
                                var y = x[1].split('=')
                                o[s[0]].query = y[0]
                                o[s[0]].alias = y[1]
                            } else {
                                o[s[0]].query = 'id'
                                o[s[0]].alias = 'id'
                            }
                        } else {
                            o[s[0]].api = s[1]
                        }
                    })
                    this.checkableMap = o
                }
                if (!this.total && !this.defName) {
                    Helper.error('表格渲染错误：缺乏defName参数')
                } else {
                    this.loading = true;
                    if (this.total) {
                        url = this.total;
                    } else if (this.defName) {
                        url = this.theadSource + this.defName;
                    }
                    Rest.get(url).done(function (res) {
                        if (Helper.isSuccess(res)) {
                            // 初始化表头配置列表
                            _this.visibleList = []
                            _this.hiddenList = []
                            if (res.data.properties) {
                                // 父级修改表头字段
                                var changeTheadkeyList = Object.keys(_this.changeThead) || [];
                                if (changeTheadkeyList && changeTheadkeyList.length > 0) {
                                    res.data.properties.forEach((o) => {
                                        if (changeTheadkeyList.indexOf(o.name) > -1) {
                                            var changeItem = _this.changeThead[o.name];
                                            for (var i in changeItem) {
                                                o[i] = changeItem[i];
                                            }
                                        }
                                    })
                                }
                                // 截取掉hide为true的表头数据
                                var showlist = [];
                                res.data.properties.forEach((o) => {
                                    if (!o.hide) {
                                        showlist.push(o)
                                    }
                                })
                                // 表头排序
                                showlist = showlist.sort(function (a, b) {
                                    return a.displayOrder - b.displayOrder
                                })
                                showlist.forEach(function (item) {
                                    // 默认不显示高级筛选
                                    item.showFilter = false
                                    // 初始化隐藏/显示选项列表
                                    var listName = item.visible ? 'visibleList' : 'hiddenList'
                                    _this[listName].push({
                                        name: item.name,
                                        displayName: item.displayName,
                                        checked: false,
                                        id: item.id
                                    })
                                    _this.getFilterType(item);
                                })
                                _this.thead = showlist;
                                

                            }
                            // 获取tdata
                            if (_this.isPager) {
                                _this.$refs.refPager.changePage(1)
                            }
                            _this.getList(res)
                        } else {
                            Helper.toast(res.status.msg)
                        }
                    })
                }
            },
            // 过滤条件移动
            move(type) {
                var $target = $('#move-list')
                var $parent = $target.parent()
                var $children = $target.children()
                var dist = parseInt($target.css('margin-left'), 10) || 0
                const PER = 200 // 移动距离
                const MAX_DIST = 0 // 最大距离
                var MIN_DIST = 0 // 最小距离
                for (var i = 0, len = $children.length; i < len; i++) {
                    MIN_DIST += $children.eq(i)[0].offsetWidth + 8
                }
                // 过滤条件过少，不移动
                if (MIN_DIST < $parent[0].offsetWidth) return false
                MIN_DIST = $parent[0].offsetWidth - MIN_DIST
                dist = !!type ? dist - PER : dist + PER
                if (dist > MAX_DIST) dist = MAX_DIST
                if (dist < MIN_DIST) dist = MIN_DIST
                $target.stop(true).animate({
                    marginLeft: dist + 'px'
                })
            },
            // 初始表头高级筛选数据
            getFilterType(thData) {
                var _this = this
                var o = {}
                o.name = thData.name
                o.displayName = thData.displayName
                // 排序
                // o.sort = true
                if (thData.sortable) {
                    o.sort = true
                }
                // 搜索
                if (thData.dataType == 1 || thData.dataType == 2) {
                    // todo 根据数据类型定义高级搜索类型 
                    // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
                    o.search = ''
                    o.searchType = thData.dataType;
                }
                if (thData.dataType == 3) {
                    // todo 根据数据类型定义高级搜索类型 
                    // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
                    o.range = ''
                    o.rangeBegin = 0
                    o.rangeEnd = 0
                }
                if (thData.dataType == 7 || thData.dataType == 9) {
                    // todo 根据数据类型定义高级搜索类型 
                    // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
                    o.timepicker = ''
                    o.timeStart = ''
                    o.timeEnd = ''
                }
                // 复选
                if (thData.acceptedMultiValues && (thData.dataRetrieveUrl || thData.enumPairs)) {
                    o.checkbox = {}
                    o.checkbox.retrieveUrl = thData.dataRetrieveUrl || ''
                    o.checkbox.enumPairs = thData.enumPairs || [];
                    // 记录字典字段
                    if (_this.dicFields.indexOf(thData.name) < 0) {
                        _this.dicFields.push(thData.name);

                        if (thData.enumPairs) {
                            _this.dicObjs[thData.name] = thData.enumPairs
                        } else if (o.checkbox.retrieveUrl) {
                            var parms = {};
                            _this.theadparms.map(item => {
                                if (item.name == o.name) {
                                    parms = item.parms;
                                }
                            })
                            Rest.get(o.checkbox.retrieveUrl, parms).done(function (res) {
                                if (Helper.isSuccess(res)) {
                                    o.checkbox.enumPairs = res.data
                                    _this.setDicObj(o);
                                } else {
                                    _this.$message.warning(res.status.msg)
                                }
                            })
                        }
                    }
                }
                // 单选
                if (!thData.acceptedMultiValues && (thData.dataRetrieveUrl || thData.enumPairs)) {
                    o.radio = {}
                    o.radio.retrieveUrl = thData.dataRetrieveUrl || ''
                    o.radio.enumPairs = thData.enumPairs || [];
                    // 记录字典字段
                    if (_this.dicFields.indexOf(thData.name) < 0) {
                        _this.dicFields.push(thData.name);
                        if (thData.enumPairs) {
                            _this.dicObjs[thData.name] = thData.enumPairs
                        } else if (o.radio.retrieveUrl) {
                            var parms = {};
                            _this.theadparms.map(item => {
                                if (item.name == o.name) {
                                    parms = item.parms;
                                }
                            })
                            Rest.get(o.radio.retrieveUrl, parms).done(function (res) {
                                if (Helper.isSuccess(res)) {
                                    o.radio.enumPairs = res.data
                                    _this.setDicObj(o);
                                } else {
                                    _this.$message.warning(res.status.msg)
                                }
                            })
                        }
                    }
                }
                // 组织结构树 todo 定义组织机构
                if (thData.dataType == 11) {
                    o.tree = {}
                    if (thData.retrieveUrl) { // 支持扩展树-取数接口
                        o.tree.dataRetrieveUrl = thData.dataRetrieveUrl;
                    }
                }
                var parms = {};
                _this.theadparms.map(item => {
                    if (item.name == o.name) {
                        parms = item.parms;
                    }
                })
                o.parms = parms;
                o.empty = o.sort === undefined &&
                    o.search === undefined &&
                    o.checkbox === undefined &&
                    o.radio === undefined &&
                    o.tree === undefined &&
                    o.range === undefined &&
                    o.timepicker === undefined
                return o
            },
            removeList() {
                var _this = this
                this.pagerData = {
                        page: 1, // 第几页
                        rows: 15, // 每页10条
                        startRow: 0, // 起始条数
                        endRow: 0, // 结束条数
                        total: 0, // 总数据量
                        lastPage: false, // 是否已经是最后一页
                        rowOptions: [10, 15, 20] // 每页条数切换的配置
                    },
                    _this.thead = [];
                _this.tdata = [];
            },
            getList(handler) {
                var _this = this
                var queryData = this.queryData
                var tdataSource = this.tdataSource;
                if (this.isPager) {
                    var query = {
                        page: this.pagerData.page,
                        rows: this.pagerData.rows,
                    };
                } else {
                    var query = {};
                }
                _this.rowClickedIndex = '';
                _this.loading = true;
                // 排序
                if (queryData.sort) {
                    var sortInfo = queryData.sort.split('|')
                    query.sortIndex = sortInfo[2];
                    query.sortType = sortInfo[0];
                }
                // 搜索todo search应该为数组，以支持多个名称搜索类型
                if (queryData.searchList && queryData.searchList.length > 0) {
                    var len = queryData.searchList.length;
                    for (var i = 0; i < len; i++) {
                        if (_this.dataKey == "data") {
                            query[queryData.searchList[i].name] = queryData.searchList[i].value;
                        } else {
                            if (_this.isEnocde) {
                                query[queryData.searchList[i].name] = escape(encodeURIComponent(queryData.searchList[i]
                                    .value));
                            } else {
                                query[queryData.searchList[i].name] = queryData.searchList[i].value;
                            }
                        }
                        // query[queryData.searchList[i].name] = escape(encodeURIComponent(queryData.searchList[i].value))
                        // query[queryData.searchList[i].name] = queryData.searchList[i].value;
                    }
                }
                // 区间搜索
                if (queryData.rangeList && queryData.rangeList.length > 0) {
                    var len = queryData.rangeList.length;
                    for (var i = 0; i < len; i++) {
                        if (queryData.rangeList[i][queryData.rangeList[i].name + "Begin"] || queryData.rangeList[i][
                                queryData.rangeList[i].name + "Begin"
                            ] == 0) {
                            query[queryData.rangeList[i].name + "Begin"] = queryData.rangeList[i][queryData.rangeList[i]
                                .name + "Begin"
                            ]
                        }
                        if (queryData.rangeList[i][queryData.rangeList[i].name + "End"] || queryData.rangeList[i][
                                queryData.rangeList[i].name + "End"
                            ] == 0) {
                            query[queryData.rangeList[i].name + "End"] = queryData.rangeList[i][queryData.rangeList[i].name +
                                "End"
                            ]
                        }
                    }
                }
                // 日期
                if (queryData.timeList && queryData.timeList.length > 0) {
                    var len = queryData.timeList.length;
                    for (var i = 0; i < len; i++) {
                        if (queryData.timeList[i][queryData.timeList[i].name + "Begin"]) {
                            query[queryData.timeList[i].name + "Begin"] = queryData.timeList[i][queryData.timeList[i].name +
                                "Begin"
                            ]
                        }
                        if (queryData.timeList[i][queryData.timeList[i].name + "End"]) {
                            query[queryData.timeList[i].name + "End"] = queryData.timeList[i][queryData.timeList[i].name +
                                "End"
                            ]
                        }
                    }
                }
                // 单选/复选
                if (Object.keys(queryData.checked).length > 0) {
                    for (var key in queryData.checked) {
                        query[key] = queryData.checked[key].split('|')[0]
                    }
                }
                // 树-组织结构
                if (queryData.tree.value) {
                    query[queryData.tree.key] = queryData.tree.value
                }
                if (tdataSource) {
                    // 获取表数据
                    Rest.get(tdataSource, query).done(function (res) {
                        if (Helper.isSuccess(res)) {
                            setTimeout(() => {
                                _this.loading = false;
                            }, 500)
                            if (_this.tdataKey) {
                                res.data = res.data.page || {};
                            }
                            if (_this.isPager) {
                                _this.pagerData.total = res.data.totalCount || 0;
                                _this.pagerData.lastPage = res.data.lastPage || 0;
                                _this.pagerData.startRow = res.data.startRow || 0;
                                _this.pagerData.endRow = res.data.endRow || 0;
                            }
                            if (_this.dataKey == "data") {
                                res.data.items = res.data;
                            }
                            if (_this.isChangeData) {
                                _this.$emit("changeData", res.data.items);
                            }
                            // 表格行，默认不选中
                            if (_this.checkable && res.data.items.length > 0) {
                                res.data.items.forEach(function (item) {
                                    item.checked = false
                                })
                            }
                            if (res.data.items.length > 0) {
                                _this.shortallCustomerIds = res.data.items[0].allCustomerIds || [];
                                _this.shortallCustomerDemandIds = res.data.items[0].allCustomerDemandIds || [];
                            } else {
                                _this.shortallCustomerIds = _this.shortallCustomerDemandIds = [];
                            }

                            _this.tdata = res.data.items || [];
                            var formartlist = [];
                            _this.thead.forEach((o) => {
                                //var queryConditionConstraint = eval('(' + o.queryConditionConstraint + ')');
                                var queryConditionConstraint = eval(o.queryConditionConstraint);
                                if (queryConditionConstraint && queryConditionConstraint.formart) {
                                    var obj = {
                                        "name": o.name,
                                        "formart": queryConditionConstraint.formart
                                    }
                                    formartlist.push(obj);
                                }
                            })
                            var formarNameList = [];
                            formartlist.forEach((o) => {
                                formarNameList.push(o.name);
                            })
                            _this.tdata.forEach((o) => {
                                for (var i in o) {
                                    if (formarNameList.indexOf(i) > -1) {
                                        formartlist.forEach((f) => {
                                            if (f.name == i) {
                                                if (f.formart == 'moneyFormart_toFixed4') {
                                                    o[i] = Helper.moneyFormart_toFixed4(o[i]);
                                                } else if (f.formart == 'moneyFormart') {
                                                    o[i] = Helper.moneyFormart(o[i]);
                                                }
                                            }
                                        });
                                    }
                                }
                            })
                            if (_this.allCustomerIds.length > 0 && res.data.items.length > 0) { //翻页时判断若全部选中，将本页选中
                                for (var i = 0; i < _this.allCustomerIds.length; i++) { //条件筛选后剔除不存在项
                                    var checkit = false;
                                    for (var n = 0; n < res.data.items[0].allCustomerIds.length; n++) {
                                        if (_this.allCustomerIds[i].customerId == res.data.items[0].allCustomerIds[
                                                n]) {
                                            checkit = true;
                                            break;
                                        }
                                    }
                                    if (checkit == false) {
                                        _this.allCustomerIds.splice(i--, 1);
                                    }
                                }
                                this.itemAllChecked = false;
                                for (var p = 0; p < _this.tdata.length; p++) {
                                    for (var j = 0; j < _this.allCustomerIds.length; j++) {
                                        if (_this.tdata[p].customerId == _this.allCustomerIds[j].customerId) {
                                            _this.tdata[p].checked = true;
                                        }
                                    }
                                }
                                //              _this.checkedItemCount=_this.allCustomerIds.length;
                                _this.updateCheckedStats();
                            }
                            _this.$emit("listLoadingCallback", _this.tdata, query, _this.pagerData);
                            if (typeof handler === 'function') handler();
                        } else {
                            setTimeout(() => {
                                _this.loading = false;
                            }, 500)
                            _this.$Message.error(res.status.msg);
                        }
                        //           _this.unCheckAll();
                        //           _this.getListCount()
                    })
                }
            },
            // 获取合计
            getListCount() {
                var _this = this
                if (_this.count != '' && _this.count != null) {
                    var queryData = _this.queryData
                    var query = {};
                    // 搜索todo search应该为数组，以支持多个名称搜索类型
                    if (queryData.searchList && queryData.searchList.length > 0) {
                        var len = queryData.searchList.length;
                        for (var i = 0; i < len; i++) {
                            query[queryData.searchList[i].name] = escape(encodeURIComponent(queryData.searchList[i].value))
                            // query[queryData.searchList[i].name] = query[queryData.searchList[i].name].replace(/(^\s*)|(\s*$)/g, ""); 
                            // query[queryData.searchList[i].name] = queryData.searchList[i].value;
                        }
                    }
                    // 区间搜索
                    if (queryData.rangeList && queryData.rangeList.length > 0) {
                        var len = queryData.rangeList.length;
                        for (var i = 0; i < len; i++) {
                            if (queryData.rangeList[i][queryData.rangeList[i].name + "Begin"] || queryData.rangeList[i]
                                [queryData.rangeList[i].name + "Begin"] == 0) {
                                query[queryData.rangeList[i].name + "Begin"] = queryData.rangeList[i][queryData.rangeList[
                                    i].name + "Begin"]
                            }
                            if (queryData.rangeList[i][queryData.rangeList[i].name + "End"] || queryData.rangeList[i][
                                    queryData.rangeList[i].name + "End"
                                ] == 0) {
                                query[queryData.rangeList[i].name + "End"] = queryData.rangeList[i][queryData.rangeList[
                                    i].name + "End"]
                            }
                        }
                    }
                    // 日期
                    if (queryData.timeList && queryData.timeList.length > 0) {
                        var len = queryData.timeList.length;
                        for (var i = 0; i < len; i++) {
                            if (queryData.timeList[i][queryData.timeList[i].name + "Begin"]) {
                                query[queryData.timeList[i].name + "Begin"] = queryData.timeList[i][queryData.timeList[
                                    i].name + "Begin"]
                            }
                            if (queryData.timeList[i][queryData.timeList[i].name + "End"]) {
                                query[queryData.timeList[i].name + "End"] = queryData.timeList[i][queryData.timeList[i]
                                    .name + "End"
                                ]
                            }
                        }
                    }
                    // 单选/复选
                    if (Object.keys(queryData.checked).length > 0) {
                        for (var key in queryData.checked) {
                            query[key] = queryData.checked[key].split('|')[0]
                        }
                    }
                    // 树-组织结构
                    if (queryData.tree.value) {
                        query[queryData.tree.key] = queryData.tree.value
                    }
                    Rest.get(_this.count, query).done(function (res) {
                        if (Helper.isSuccess(res)) {
                            if (res.data) {
                                if (res.data.countVo) {
                                    _this.countList = res.data.countVo;
                                } else {
                                    _this.countList = res.data;
                                }
                                /*与表头匹配，并将值保存在表头列表中，便于页面展示*/
                                if (_this.countList.length > 0) {
                                    for (var i = 0, tlen = _this.thead.length; i < tlen; i++) {
                                        _this.thead[i].gridTableCount = null;
                                        for (var j = 0, len = _this.countList.length; j < len; j++) {
                                            if (_this.countList[j].indexName == _this.thead[i].name) {
                                                _this.thead[i].gridTableCount = _this.countList[j].valueCount;
                                            }
                                        }
                                    }
                                } else { /*没有数据时，应清空数据*/
                                    for (var i = 0, tlen = _this.thead.length; i < tlen; i++) {
                                        _this.thead[i].gridTableCount = null;
                                    }
                                }
                            } else {
                                _this.countList = [];
                            }
                        } else {
                            _this.countList = [];
                            _this.$Message.error(res.status.msg);
                        }
                    })
                }
            },
            // 点击TD
            handleTDClick(e, rowData, thead) {
                e.stopPropagation();
                this.$emit('handleTDClick', rowData, thead)
            },
            // 点击行
            clickRow(e, rowData, index) {
                e.stopPropagation()
                this.rowClickedIndex = index
                this.$emit('clickRow', rowData, index)
            },
            // 流程操作
            operationOne(e, rowData, index) {
                e.stopPropagation();
                //this.rowClickedIndex = index
                this.$emit('operationOne', rowData, index)
            },
            operationTwo(e, rowData, index) {
                e.stopPropagation();
                //this.rowClickedIndex = index
                this.$emit('operationTwo', rowData, index)
            },
            //针对激励奖金管理加入的操作--更名
            changeName(e, rowData, index) {
                e.stopPropagation();
                this.$emit('changeName', rowData, index)
            },
            //针对激励奖金管理加入的操作--提交
            changeSubmit(e, rowData, index) {
                e.stopPropagation();
                this.$emit('changeSubmit', rowData, index)
            },
            //针对激励奖金管理加入的操作--撤回
            withdraw(e, rowData, index) {
                e.stopPropagation();
                this.$emit('withdraw', rowData, index)
            },
            processInfo(e, rowData, index) {
                e.stopPropagation();
                this.$emit('processInfo', rowData, index)
            },
            // 筛选之后触发的函数
            filter(queryData) {
                var that = this;
                // 赋值过滤条件
                $(".cp-grid-table").click();
                if (queryData) {
                    // 排序
                    this.queryData.sort = queryData.sort;
                    // 搜索
                    this.queryData.search = queryData.search;
                    this.queryData.searchList = queryData.searchList;
                    // 区间
                    this.queryData.range = queryData.range;
                    this.queryData.rangeList = queryData.rangeList;
                    // 日期
                    this.queryData.timepicker = queryData.timepicker;
                    this.queryData.timeList = queryData.timeList;
                    // 单选/复选
                    for (var key in queryData.checked) {
                        if (queryData.checked.hasOwnProperty(key)) this.queryData.checked[key] = queryData.checked[key]
                    }
                    // 组织结构
                    if (queryData.tree.value) {
                        this.queryData.tree = queryData.tree
                    }
                    that.nodata_child = "暂无数据"
                }
                // 隐藏所有的高级筛选
                this.thead.forEach(function (th) {
                    th.showFilter = false
                });
                // 更新已选的单选/复选的keys列表
                this.checkedKeys = Object.keys(this.queryData.checked);
                // 获取数据
                if (this.pagerData.page === 1) {
                    this.getList()
                } else {
                    if (that.isPager) {
                        that.$refs.refPager.changePage(1)
                    }
                }
            },
            // 调研字典API之后更新字典数据
            setDicObj(option) {
                var _this = this;
                if (option && _this.dicFields.indexOf(option.name) >= 0) {
                    _this.dicObjs[option.name] = option.checkbox ? option.checkbox.enumPairs : option.radio.enumPairs
                }
            },
            // 移除已选的高级筛选条件
            removeFilter(type, name) {
                this.nodata_child = this.nodataBackup;
                switch (type) {
                    case 'sort': // 排序
                        this.queryData.sort = ''
                        break
                    case 'search': // 搜索
                        // this.queryData.search.value = '';
                        Bus.$emit("removeFilter_search", name);
                        break
                    case 'range': // 区间
                        // this.queryData.search.value = '';
                        Bus.$emit("removeFilter_range", name);
                        break
                    case 'timepicker': // 日期
                        // this.queryData.search.value = '';
                        Bus.$emit("removeFilter_timepicker", name);
                        break
                    case 'checked': // 单选/复选
                        delete this.queryData.checked[name]
                        this.checkedKeys = Object.keys(this.queryData.checked);
                        // 重置单选/复选的值
                        this.$refs.filters.forEach(function (filter) {
                            filter.reset(name)
                        })
                        break
                    case 'tree':
                        this.queryData.tree.value = ''
                        this.queryData.tree.name = ''
                        this.$refs.filters.forEach(function (filter) {
                            filter.reset(name)
                        })
                        break;
                }
                // 将过滤条件移动回来
                var $target = $('#move-list');
                $target.stop(true).animate({
                    marginLeft: 0 + 'px'
                })
                this.getList()
            },
            // 清除所有已选高级筛选条件
            closeFilter() {
                this.queryData = { // 高级搜索查询数据
                    sort: '',
                    search: {
                        value: '',
                        name: '',
                        displayName: ''
                    },
                    checked: {},
                    tree: {
                        key: 'orgIds',
                        value: '',
                        name: '',
                        displayName: ''
                    },
                    range: {
                        name: '',
                        displayName: '',
                        rangeBegin: 0,
                        rangeEnd: 0
                    },
                    searchList: [],
                    rangeList: [],
                };
                // 将过滤条件移动回来
                var $target = $('#move-list');
                $target.stop(true).animate({
                    marginLeft: 0 + 'px'
                })
            },
            // 删除选中行
            deleteRow() {
                var _this = this
                var options = this.checkableMap['delete']
                var api = options.api
                var query = options.query
                var alias = options.alias
                var checkedIds = ''
                this.tdata.forEach((item) => {
                    if (item.checked) checkedIds += checkedIds ? ',' + item[alias] : item[alias]
                })
                if (checkedIds) {
                    Helper.confirm('您确定要删除这些项吗？', function (isOk) {
                        if (isOk) {
                            var q = {}
                            q[query] = checkedIds
                            Rest.delete(api, q).done(function (res) {
                                if (Helper.isSuccess(res)) {
                                    Helper.success('删除成功', function () {
                                        _this.getList(function () {
                                            _this.updateCheckedStats()
                                        })
                                    })
                                } else {
                                    Helper.error(res.status.msg)
                                }
                            })
                        }
                    })
                } else {
                    Helper.warning('请选择待删除项！');
                }
            },
            // 分页：页码改变
            pageChange(page) {
                this.pagerData.page = page;
                this.getList()
            },
            // 分页：每页条数改变
            rowChange(rows) {
                this.pagerData.rows = rows
                this.getList()
            },
            // 选择页
            selectPage() {
                this.$emit('pageChange')
            },
            // 选择复选框
            checkItem(e, item, index) {
                var _this = this;
                var checkedList = [];
                var checkedListes = [];
                                this.intimes=2;
                if (item.checked == true) { //选中-取消
                    this.checkedItemCount--;
                    this.allCustomerIds.forEach(function (value, indexes) {
                        if (item.customerId == value.customerId) {
                            _this.allCustomerIds.splice(indexes, 1);
                            // _this.allCustomerDemandIds.splice(indexes,1);
                        }
                    })
                    //          this.allCustomerDemandIds.forEach(function(value,indexes){
                    //              if(item.customerId==value){
                    //                  _this.allCustomerDemandIds.splice(indexes,1);
                    //              }
                    //          })
                } else { //取消-选中
                    this.checkedItemCount++;
                    _this.allCustomerIds.push({
                        'customerId': item.customerId,
                        'customerDemandId': item.customerDemandId
                    });
                    // _this.allCustomerDemandIds.push(item.customerDemandId);
                }
                item.checked = !item.checked
                this.updateCheckedStats()
                e.stopPropagation()
                checkedList = this.allCustomerIds;
                // checkedListes =this.allCustomerDemandIds;
                this.$emit('selection-change', checkedList)
            },
            //所有页数数据全选中
            checkAlles(e) {
                var _this = this;
                var checkedList = [];
                var checkedListes = [];
                                this.intimes=2;
                if (this.itemAllpageChecked == false) { //未选-全选
                    this.shortallCustomerIds.forEach(function (value, index) {
                        _this.allCustomerIds.push({
                            'customerId': value,
                            'customerDemandId': _this.shortallCustomerDemandIds[index]
                        });
                    })
                    //          this.allCustomerIds=this.shortallCustomerIds;
                    //          this.allCustomerDemandIds=this.shortallCustomerDemandIds;
                    this.itemAllpageChecked = true;
                    this.checkedItemCount = this.shortallCustomerIds.length;
                    this.whetherchecktitle = '取消全选';
                    this.tdata.forEach(function (item) {
                        item.checked = true
                    })
                } else { //全选-未选
                    this.itemAllpageChecked = false;
                    this.allCustomerIds = [];
                    // this.allCustomerDemandIds=[];
                    this.whetherchecktitle = '全部选择';
                    this.checkedItemCount = 0;
                    this.tdata.forEach(function (item) {
                        item.checked = false
                    })
                }
                this.updateCheckedStats()
                e.stopPropagation()
                checkedList = this.allCustomerIds;
                // checkedListes =this.allCustomerDemandIds;
                //      this.tdata.forEach((item) => {
                //          if (item.checked) checkedList.push(item)
                //      })
                this.$emit('selection-change', checkedList)
            },
            // 当前页全选
            checkAll(e) {
                var _this = this;
                var checkedList = [];
                                this.intimes=2;
                if (this.itemAllChecked) { //已全选，取消全选
                    for (var k = 0; k < this.tdata.length; k++) {
                        if (this.tdata[k].checked == true) {
                            _this.checkedItemCount--;
                            this.tdata[k].checked = false;
                            for (var i = 0; i < _this.allCustomerIds.length; i++) {
                                if (this.tdata[k].customerId == _this.allCustomerIds[i].customerId) {
                                    _this.allCustomerIds.splice(i, 1)
                                }
                            }
                        }
                    }
                } else { // 未全选，全选
                    this.tdata.forEach(function (item) {
                        if (item.checked == false) {
                            _this.checkedItemCount++;
                            item.checked = true;
                            _this.allCustomerIds.push({
                                'customerId': item.customerId,
                                'customerDemandId': item.customerDemandId
                            });
                            // _this.allCustomerDemandIds.push(item.customerDemandId);
                        } else if (!item.checked) {
                            _this.checkedItemCount++;
                            item.checked = true;
                            _this.allCustomerIds.push({
                                'customerId': item.customerId,
                                'customerDemandId': item.customerDemandId
                            });
                            // _this.allCustomerDemandIds.push(item.customerDemandId);
                        }
                    })
                }
                this.updateCheckedStats()
                e.stopPropagation()
                checkedList = this.allCustomerIds;
                // checkedListes =this.allCustomerDemandIds;
                this.$emit('selection-change', checkedList)
            },
            // 关闭编辑栏，取消选中
            unCheckAll() {
                if (this.tdata) {
                    this.tdata.forEach((item) => {
                        item.checked = false
                    })
                }
                this.itemAllChecked = false;
                this.updateCheckedStats()
            },
            // 编辑显示字段 - 是否有选中，左右移动icon变色
            hasCheck() {
                var numL = 0;
                var numR = 0;
                for (var i in this.hiddenList) {
                    if (this.hiddenList[i].checked) {
                        numL++
                    }
                }
                for (var i in this.visibleList) {
                    if (this.visibleList[i].checked) {
                        numR++
                    }
                }
                if (numL > 0) {
                    this.hasCheck_hiddenList = true;
                } else {
                    this.hasCheck_hiddenList = false;
                }
                if (numR > 0) {
                    this.hasCheck_visibleList = true;
                } else {
                    this.hasCheck_visibleList = false;
                }
            },
            // 编辑显示字段 - 选中项
            check(item) {
                item.checked = !item.checked
                this.hasCheck();
            },
            // 编辑显示字段 - 传输
            transfer(type) {
                var doTrans = function (from, to, data) {
                    var uncheckedItems = []
                    data[from].forEach(function (item) {
                        if (item.checked) {
                            item.checked = false
                            data[to].push(item)
                        } else {
                            uncheckedItems.push(item)
                        }
                    })
                    data[from] = uncheckedItems
                }
                switch (type) {
                    case 1: // 从右到左
                        doTrans('visibleList', 'hiddenList', this);
                        this.hasCheck_visibleList = false;
                        break
                    case 2: // 从左到右
                        doTrans('hiddenList', 'visibleList', this);
                        this.hasCheck_hiddenList = false;
                        break
                }
            },
            // 编辑显示字段 - 排序
            sort(type) { // type: 1 向上，2 向下
                var move = function (type, i, arr, data) {
                    var limit
                    var distIndex
                    var distItem
                    switch (type) {
                        case 1:
                            limit = 0
                            distIndex = i - 1
                            break
                        case 2:
                            limit = arr.length - 1
                            distIndex = i + 1
                            break
                    }
                    if (i == limit) return false
                    distItem = arr[distIndex]
                    data.$set(arr, distIndex, arr[i])
                    data.$set(arr, i, distItem)
                }
                if (type === 1) {
                    for (var i = 0, len = this.visibleList.length; i < len; i++) {
                        if (this.visibleList[i].checked) move(type, i, this.visibleList, this)
                    }
                } else if (type === 2) {
                    for (var i = this.visibleList.length - 1; i >= 0; i--) {
                        if (this.visibleList[i].checked) move(type, i, this.visibleList, this)
                    }
                } else {
                    console.error('Error: sort(type): type类型不正确')
                    return false
                }
            },
            // 拖拽
            dragstart(ev) {
                ev.dataTransfer.setData('text', ev.target.getAttribute('transdata'))
                ev.effectAllowed = 'move'
            },
            // 拖拽
            dragend(ev) {
                ev.dataTransfer.clearData()
            },
            // 拖拽
            dragover(ev) {
                var nodeName = ev.target.nodeName.toUpperCase()
                switch (nodeName) {
                    case 'DIV':
                        this.dropTargetIndex = '$'
                        $('.dragover').removeClass('dragover')
                        break
                    case 'UL':
                        this.dropTargetIndex = '$'
                        $('.dragover').removeClass('dragover')
                        break
                    case 'LI':
                        this.dropTargetIndex = ev.target.getAttribute('transdata').split('|')[1]
                        $(ev.target).addClass('dragover').siblings().removeClass('dragover')
                        break
                    case 'LABEL':
                        this.dropTargetIndex = ev.target.parentNode.getAttribute('transdata').split('|')[1]
                        $(ev.target.parentNode).addClass('dragover').siblings().removeClass('dragover')
                        break
                    case 'I':
                        this.dropTargetIndex = ev.target.parentNode.getAttribute('transdata').split('|')[1]
                        $(ev.target.parentNode).addClass('dragover').siblings().removeClass('dragover')
                        break
                    default:
                        this.dropTargetIndex = '$'
                        break
                }
                ev.preventDefault()
            },
            // 拖拽
            drop(ev) {
                var transdata = ev.dataTransfer.getData('text')
                var listName = transdata.split('|')[0]
                var index = transdata.split('|')[1]
                var item = this[listName][index]
                var dropTargetName = ev.currentTarget.id
                if (listName !== dropTargetName) {
                    if (this.dropTargetIndex === '$') {
                        this[dropTargetName].push(item)
                    } else if (this.dropTargetIndex === '0') {
                        this[dropTargetName].unshift(item)
                    } else {
                        this[dropTargetName].splice(this.dropTargetIndex, 0, item)
                    }
                    this[listName].splice(index, 1)
                } else {
                    if (this.dropTargetIndex === '$') this.dropTargetIndex = this[dropTargetName].length - 1
                    var fromItem = this[dropTargetName].splice(index, 1)[0]
                    this[dropTargetName].splice(this.dropTargetIndex, 0, fromItem)
                }
                $('.dragover').removeClass('dragover');
                this.hasCheck();
            },
            // 修改表头
            updateTHeadVisible(visible, callback) {
                var that = this;
                var restApi = Api.tbQeury.updateCustom;
                var parms = {};
                var list = visible ? that.visibleList : that.hiddenList
                if (list.length > 0) {
                    var tableQueryDefIds = list.map(item => item.id).join(',')
                    parms = {
                        "defName": that.defName,
                        "tableQueryDefIds": tableQueryDefIds,
                        // "visible": visible
                    };
                    Rest.put(restApi, null, parms).done(function (res) {
                        if (Helper.isSuccess(res)) {
                            if (typeof callback) callback()
                        } else {
                            Helper.error(res.status.msg)
                        }
                    })
                } else {
                    if (typeof callback) callback()
                }
            },
            // 保存设置
            saveSetting() {
                var that = this;
                if (that.visibleList && that.visibleList.length > 0) {
                    that.updateTHeadVisible(true, function () {
                        Helper.success('保存成功', function () {
                            that.hasCheck_hiddenList = false;
                            that.hasCheck_visibleList = false;
                            that.showSetting = false
                            that.init()
                        })
                    });
                } else {
                    that.showSetting = true;
                    Helper.warning('列表项至少保留一个！')
                }
            },
            // 取消保存设置
            cancelSetting() {
                this.initTHeadGroup();
                this.hasCheck_hiddenList = false;
                this.hasCheck_visibleList = false;
                this.showSetting = false;
            },
            // 初始化表头配置列表
            initTHeadGroup() {
                var _this = this
                Rest.get(this.theadSource + this.defName).done(function (res) {
                    if (Helper.isSuccess(res)) {
                        // 初始化表头配置列表
                        _this.visibleList = []
                        _this.hiddenList = []
                        if (res.data.properties) {
                            res.data.properties.forEach(function (item) {
                                if (!item.hide) {
                                    // 初始化隐藏/显示选项列表
                                    var listName = item.visible ? 'visibleList' : 'hiddenList'
                                    _this[listName].push({
                                        name: item.name,
                                        displayName: item.displayName,
                                        checked: false
                                    })
                                }
                            })
                        }
                    } else {
                        Helper.toast(res.status.msg)
                    }
                })
            },
            // 更新选中状态
            updateCheckedStats() {
                var _this = this
                // _this.checkedItemCount = 0
                if (this.tdata && this.tdata.length > 0) {
                    this.itemAllChecked = this.tdata.every(item => item.checked)
                    this.hasItemChecked = this.tdata.some(item => item.checked)
                } else {
                    this.itemAllChecked = false;
                    this.hasItemChecked = false;
                    this.checkedItemCount = 0;
                }
                this.showOperation = this.itemAllChecked || this.hasItemChecked;
                if (this.checkedItemCount > 0) {
                    _this.topShow = false;
                    _this.topShow2 = true;
                } else {
                    _this.topShow = true;
                    _this.topShow2 = false;
                }

                //       if(this.showOperation){
                //         _this.topShow = false;
                //         setTimeout(()=>{
                //           _this.topShow2 = true;
                //         },50)
                //       }else{
                //         _this.topShow2 = false;
                //         setTimeout(()=>{
                //           _this.topShow = true;
                //         },50)
                //       }
            },
            // 表格体内容的过滤
            getTdNumber(val, name) {
                var _this = this;
                if (_this.dicFields.indexOf(name) >= 0) {
                    var d = _this.dicObjs[name] || '';
                    for (var i = 0, len = d.length; i < len; i++) {
                        if (d[i].id == val) {
                            val = d[i].name;
                            break;
                        }
                    }
                }
                return val;
            },
            // 表格体内容的过滤
            getTdString(val, name) {
                var _this = this;
                if (_this.dicFields.indexOf(name) >= 0) {
                    var d = _this.dicObjs[name] || '';
                    for (var i = 0, len = d.length; i < len; i++) {
                        if (d[i].id == val) {
                            val = d[i].name;
                            break;
                        }
                    }
                }
                return val;
            },
            // 表格体内容的过滤
            getTdArray(val, name) {
                var _this = this;
                return val.map(function (value) {
                    if (_this.dicFields.indexOf(name) >= 0) {
                        var d = _this.dicObjs[name] || '';
                        for (var i = 0, len = d.length; i < len; i++) {
                            if (d[i].id == value) {
                                value = d[i].name;
                                break;
                            }
                        }
                    }
                    return value;
                }).join('/')
            },
            getTdObject(val, dataType) {
                if (val) {
                    return val.name;
                }
                if (dataType == '3') {
                    return 0
                }
                return val
            },
            getRangTitle(begin, end) {
                // {{item[item.name+'Begin']?item[item.name+'Begin']:0}}{{item[item.name+'End']?'~'+item[item.name+'End']:'到~'}}
                var val = "";
                if ((begin || begin == 0) || (end == 0)) {
                    if (begin == 0 || !begin) {
                        begin = '0';
                    }
                    if (end || end == 0) {
                        end = "~" + end;
                    } else {
                        end = "到~";
                    }
                    val = begin + '' + end;
                }
                return val;
            }
        },
        created() {
            this.init();
        },
        activated() {},
        components: {
            gridFilter
        },
        props: {
            title: { // 表格标题
                type: String,
                default: ''
            },
            nodata: {
                type: String, // 表格无数据时显示的字符串
                default: '暂无数据~'
            },
            defName: { // 表格头数据源参数defName: GET api/v1/tb_query_defs/{defName} 获取查询定义
                type: String
            },
            theadparms: {
                type: Array,
                default: function () {
                    return []
                }
            },
            tdataSource: { // 数据url
                type: String
            },
            checkable: { // 每一列是否可选
                type: String,
                default: ''
            },
            filterable: {
                type: Boolean,
                default: false
            },
            hasCheckbox: { // 是否展示多选框
                type: Boolean,
                default: false
            },
            setting: { // 是否展示表头设置
                type: Boolean,
                default: true
            },
            total: { //外部表头接口
                type: String,
                default: ''
            },
            count: { //合计接口
                type: String,
                default: ''
            },
            countTitle: { //合计标题
                type: String,
                default: '合计值'
            },
            countFormart: {
                type: String,
                default: 'moneyFormart'
            },
            seachMaxlength: {
                type: Number,
                default: 10
            },
            isFirstLoad: {
                type: Boolean,
                default: true
            },
            clickTD: { // 用来判断是否需要单个TD点击，如果clickTD存在，行点击就消失
                type: Boolean,
                default: false
            },
            operation: {
                type: Boolean,
                default: false
            },
            BonusOperation: {
                type: Boolean,
                default: false
            },
            tdataKey: {
                type: Boolean,
                default: false
            },
            nocursor: {
                type: Boolean,
                default: false
            },
            tableOnly: {
                type: Boolean,
                default: false
            },
            isPager: { //是否分页
                type: Boolean,
                default: true
            },
            dataKey: { //用来根据数据类型进行数据处理
                type: String,
                default: "item"
            },
            isChangeData: { // 数据是否需要转化
                type: Boolean,
                default: false
            },
            isEnocde: {
                type: Boolean,
                default: true
            },
            /*
              修改表头字段 例：
              that.changeThead = 
                { 
                  'exclusiveSalePrice': { 'hide':false }, 
                  'exclusiveSalePrice': { 'hide':false }, 
                  'exclusiveSalePrice': { 'hide':false } 
                }
            */
            changeThead: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            processOperation: {
                type: Boolean,
                default: false,
            },
            productIntention: {
                //type: Number,
                default: '',
            },
            hasNext: {
                type: Boolean,
                default: true,
            },
            isNameIcon: {//是否显示用户图标
                type:Boolean,
                default:false,
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "../../assets/sass/install";
    .cp-grid-table {
        position: fixed;
        left: 220px;
        right: 0;
        top: 50px;
        bottom: 0;
        .topShowWarp {
            position: relative;
            z-index: 10;
            height: 50px;
            min-width: 1050px;
            background-color: #f3f3f3;
            border-bottom: 1px solid #bebebe;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .wedgets {
            display: flex;
            flex-direction: row;
            align-items: center;
            .heading {
                height: 50px;
                line-height: 50px;
                padding-left: 20px;
                color: #333333;
                flex-shrink: 0;
                .titleHandle {
                    display: inline-block;
                }
            }
            .grid-selected-conditions {
                flex-grow: 1;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                margin-left: 10px;
                padding-top: 1px;
                .tip {
                    background-color: white;
                    padding: 0 10px;
                    height: 32px;
                    line-height: 32px;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid $borderColor;
                    color: #8fa1b1;
                    cursor: pointer;
                    @include radius(3px);
                    &.filter-sort {
                        flex-shrink: 0;
                    }
                    .highlight {
                        color: $blue;
                        max-width: 120px;
                        display: inline-block;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    .x {
                        width: 11px;
                        height: 11px;
                        display: inline-block;
                        background: url(./images/x.png) no-repeat 0 0;
                        margin-left: 10px;
                    }
                }
                .move-panel {
                    max-width: 400px;
                    width: auto;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    margin-left: 10px;
                    .m-l {
                        width: 27px;
                        height: 11px;
                        display: inline-block;
                        margin-right: 10px;
                        background: url(./images/m-l.png) no-repeat 0 0;
                        cursor: pointer;
                    }
                    .m-r {
                        width: 27px;
                        height: 11px;
                        display: inline-block;
                        background: url(./images/m-r.png) no-repeat 0 0;
                        cursor: pointer;
                        margin-right: 10px;
                        z-index: 30;
                    }
                    .tips {
                        max-width: 660px;
                        overflow: hidden;
                        margin-right: 10px;
                        ul {
                            width: 2000px;
                            li {
                                display: inline-block;
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
            .grid-wedget-left-button {
                height: 50px;
                line-height: 50px;
                text-align: left;
                float: left;
                padding: 0;
                padding-top: 1px;
                &:after {
                    content: '';
                    display: block;
                    clear: both;
                }
            }
            .grid-wedget-button {
                margin-right: 20px;
                width: auto;
                &:after {
                    content: '';
                    display: block;
                    clear: both;
                }
                button {
                    vertical-align: middle;
                    float: left;
                    &:nth-child(2) {
                        border-top-right-radius: 0px;
                        border-bottom-right-radius: 0px;
                        margin-left: 5px;
                    }
                }
                .more-button {
                    width: 30px;
                    height: 30px;
                    vertical-align: middle;
                    background-color: #00cc66;
                    position: relative;
                    float: left;
                    display: inline-block;
                    text-align: center;
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                    border-left: 1px solid #1ca43f;
                    cursor: pointer;
                    line-height: 28px;
                    &:before {
                        content: '';
                        display: inline-block;
                        width: 9px;
                        height: 5px;
                        background: url(./images/arrow-down.png) no-repeat 0 0;
                    }
                    &.active {
                        background-color: #1ca43f;
                        &:before {
                            background-position: -73px -476px;
                        }
                    }
                }
                .more-button-list {
                    position: absolute;
                    right: 0;
                    top: 30px;
                    z-index: 5;
                    background-color: white;
                    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .2);
                    @include radius(5px);
                    width: auto;
                    li {
                        white-space: nowrap;
                        padding: 0 20px;
                        height: 35px;
                        line-height: 35px;
                        text-align: center;
                    }
                }
            }
        }
        .operation {
            @extend .wedgets;
            height: 50px;
            ul {
                height: 50px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-top: -2px;
                margin-right: 3px;
                width: 600px;
                li {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    border-right: 1px solid $borderColor;
                    &:last-child {
                        border-right: none;
                    }
                    &.text {
                        flex-basis: 80px;
                        .highlight {
                            color: $blue;
                            margin: 0 2px;
                        }
                    }
                    &.op-btn {
                        color: #a4a4a4;
                        cursor: pointer;
                        &:before {
                            content: '';
                            display: inline-block;
                            width: 14px;
                            height: 14px;
                            margin-right: 5px;
                        }
                    }
                    &.op-btn-delete {
                        &:before {
                            background: url(./images/delete.png) no-repeat 0 0;
                        }
                        &:hover {
                            color: $blue;
                            &:before {
                                background: url(./images/delete-active.png) no-repeat 0 0;
                            }
                        }
                    }
                }
            }
            .op-btn-cancel {
                height: 50px;
                line-height: 53px;
                text-align: center;
                width: 50px;
                border-left: 1px solid $borderColor;
                position: absolute;
                right: 0;
                top: 0;
                cursor: pointer;
                @include transition(500ms);
                &:hover {
                    background-color: #e3e3e3;
                    height: 49px;
                }
                ;
                &:before {
                    content: '';
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    background: url(./images/cancel.png) no-repeat 0 0;
                }
            }
        }
        .grid-table {
            position: absolute;
            top: 100px;
            right: 20px;
            left: 20px;
            bottom: 78px;
            border-left: 1px solid $thBorderColor;
            border-right: 1px solid $thBorderColor;
            border-top: 1px solid $thBorderColor;
            border-bottom: 1px solid $tdBorderColor;
            @include overflowCss();
            overflow-x: auto;
            overflow-y: hidden;
            .grid-table-container {
                background-color: white;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0px;
                padding-top: 48px;
                min-width: 1020px;
                .checkboxWarp {
                    min-width: 100px;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 15px;
                    color: #8c8b8b;
                }
                .processOperation {
                    min-width: 180px;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 15px;
                    color: #8c8b8b;
                    .step {
                        color: #02b0f0;
                        margin-right: 10px;
                    }
                }
            }
            .grid-thead {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 1;
                &:hover {
                    .ivu-col {
                        .grid-filter-container {
                            display: inline-block;
                        }
                    }
                }
                .ivu-col {
                    height: 40px;
                    line-height: 40px;
                    background-color: $thBG;
                    border-bottom: 1px solid $thBorderColor;
                    text-align: left;
                    cursor: pointer;
                    padding-left: 13px;
                    &.last-child {
                        border-left: 1px solid $thBorderColor;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .grid-filter-container {
                        display: inline-block;
                        padding: 0 8px;
                    }
                    .setting {
                        display: inline-block;
                        width: 21px;
                        height: 21px;
                        background: url(./images/setting.png) no-repeat 0 0;
                    }
                    .index {
                        color: #666666;
                        font-weight: bold;
                    }
                    .grid-table-th {
                        height: 100%;
                        position: relative;
                        .column-title {
                            display: inline-block;
                            vertical-align: top;
                            color: #666666;
                            font-weight: bold;
                            max-width: calc(100% - 52px);
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            &.noSearchable {
                                max-width: 100%;
                            }
                        }
                    }
                }
                .grid-flex-col {
                    flex-grow: 1;
                }
                .checkboxWarp {
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #d5d5d5;
                    font-weight: bold;
                    color: #666666;
                }
            }
            .grid-tdata {
                overflow-y: scroll;
                position: absolute;
                left: 0;
                right: 0;
                top: 40px;
                bottom: 0;
                background: url(./images/grid-bg.png) repeat 0 0;
                background-size: 1px 41px;
                .grid-row {
                    background-color: white;
                    border-bottom: 1px solid $tdBorderColor;
                    @include transition(500ms, background-color);
                    cursor: pointer;
                    &.active {
                        background-color: $tdBorderColor;
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                    &:hover {
                        background-color: $tdBorderColor;
                    }
                    .grid-flex-col_hover {
                        color: #02b0f0;
                        .grid-flex-col_div {
                            display: flex;
                            cursor: pointer;
                            height: 40px;
                            align-items: center;
                        }
                    }
                    .tip_icon {
                        display: inline-block;
                        vertical-align: middle;
                        margin-top: 1px;
                        width: 18px;
                        height: 20px;
                        background: url(../../assets/images/icons.png) no-repeat -461px -1045px;
                    }
                }
                  .lineBg{
                    background:#eee;
                }
                .grid-row_nocursor {
                    cursor: default;
                }
                .ivu-col {
                    height: 40px;
                    padding-left: 13px;
                    color: #8c8b8b;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    .grid-flex-col_div {
                        max-width: 100%;
                        height: 40px;
                        line-height: 40px;
                    }
                    span {
                        display: inline-block;
                        vertical-align: middle;
                        max-width: 100%;
                        padding-right: 10px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        height: 40px;
                        line-height: 40px;
                    }
                }
                .grid-flex-col {
                    flex-grow: 1;
                    overflow: hidden;
                }

                @include overflowCss();
            }
            .w10 {
                width: 10px;
                height: 40px;
                background-color: #f5f5f5;
                border-bottom: 1px solid #d5d5d5;
            }
            .b89 {
                bottom: 40px;
            }
            .gridTablenodata {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                color: #8f8f8f;
                .alert {
                    text-align: center;
                    position: fixed;
                    width: 240px;
                    left: 50%;
                    top: 50%;
                    margin-left: -10px;
                    margin-top: -50px;
                    i {
                        display: block;
                        width: 78px;
                        height: 78px;
                        background: url(./../../assets/images/customer_icons.png) no-repeat -142px -492px;
                        margin: 0 auto;
                        margin-bottom: 5px;
                    }
                }
            }
        }
        .grid-table-hasOperation {
            top: 120px;
        }
        .loadingwarp {
            position: absolute;
            width: 100%;
            bottom: 80px;
            top: 70px;
            z-index: 300;
            .gridTableloading {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -120px;
                height: 200px;
                width: 200px;
            }
        }
        .checkbox {
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            cursor: pointer;
            @include radius(3px);
        }
        .checkbox-checked {
            border: 1px solid $blue;
            background: $blue url(./images/checkbox-checked.png) no-repeat center center;
            background-size: 86% auto;
        }
        .checkbox-part-checked {
            &:after {
                content: '';
                display: block;
                width: 12px;
                height: 12px;
                background-color: $blue;
                margin: 3px 0 0 3px;
                @include radius(2px);
            }
        }
        .grid-tCout {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #e2f7ff;
            border-top: 1px solid #ddd;
            .ivu-col {
                padding-left: 13px;
                color: #8c8b8b;
                font-weight: 600;
                .col-span {
                    display: inline-block;
                    max-width: 90%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .grid-flex-col {
                flex-grow: 1;
            }
            .w10 {
                background-color: #e2f7ff
            }
        }
        .grid-tfoot {
            position: absolute;
            left: 20px;
            right: 20px;
            bottom: 30px;
            height: 49px;
            .ivu-row {
                border: 1px solid $thBorderColor;
                padding: 11px 15px 5px 15px;
                background-color: #fff;
            }
            .clear {
                display: inline-block;
                height: 32px;
                line-height: 32px;
            }
            .totalCount {
                position: fixed;
                height: 32px;
                line-height: 32px;
                display: inline-block;
                vertical-align: top;
                color: #657180;
            }
            .pager {
                display: inline-block;
                vertical-align: top;
                position: absolute;
                right: 20px;
                background-color: #fff;
                padding-left: 50px;
            }
        }
        .allchecked {
            margin: 10px 20px;
        }
        .unallchecked {
            margin: 10px 20px;
        }
        .grid-wedget-operation {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            height: 50px;
            line-height: 50px;
            min-width: 1050px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
            padding: 0 20px;
        }
    }

    .grid-setting {
        .inner {
            /*width: 728px;*/
            background-color: white;
            @include radius(5px);
            overflow: hidden;
            .heading {
                height: 44px;
                line-height: 44px;
                border-bottom: 1px solid #d5d5d5;
                background-color: #f5f5f5;
                padding: 0 19px;
                label {
                    color: #666666;
                }
                .x {
                    display: inline-block;
                    width: 13px;
                    height: 13px;
                    background: url(./images/x13.png) no-repeat 0 0;
                    float: right;
                    margin-top: 17px;
                    cursor: pointer;
                }
            }
            .bd {
                /*padding: 28px 0 28px 65px;*/
                padding: 28px 0 28px 57px;
                &:after {
                    content: '';
                    display: block;
                    clear: both;
                }
                .list-left,
                .list-right {
                    float: left;
                    text-align: left;
                    h3 {
                        font-size: 14px;
                        color: #92979e;
                        font-weight: normal;
                        height: 33px;
                        line-height: 33px;
                    }
                    .items {
                        width: 243px;
                        height: 377px;
                        border: 1px solid $borderColor;
                        @include radius(5px);
                        overflow: hidden;
                        @include overflowCss();
                        &:hover {
                            overflow: auto;
                        }
                        ;
                        ul {
                            padding-bottom: 12px;
                            li {
                                padding-top: 12px;
                                padding-left: 14px;
                                &.dragover {
                                    padding-top: 40px;
                                }
                                i {
                                    vertical-align: middle;
                                    margin-right: 8px;
                                }
                                label {
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
                .mid {
                    width: 40px;
                    height: 410px;
                    float: left;
                    margin: 0 20px;
                    .to-l {
                        display: block;
                        width: 40px;
                        height: 40px;
                        background: url(./images/trans-btn.png) no-repeat 0 0;
                        cursor: pointer;
                        margin-top: 170px;
                        margin-bottom: 22px;
                    }
                    .to-r {
                        display: block;
                        width: 40px;
                        height: 40px;
                        background: url(./images/trans-btn.png) no-repeat 0 0;
                        @include rotate(180deg);
                        cursor: pointer;
                        &:hover {}
                    }
                    .to-hover {
                        background-image: url(./images/trans-btn-active.png);
                    }
                }
                .sort {
                    width: 30px;
                    height: 410px;
                    float: left;
                    margin-left: 12px;
                    .up {
                        display: block;
                        width: 30px;
                        height: 30px;
                        background: #ebf0f1 url(./images/trans-arrow.png) no-repeat center center;
                        margin-bottom: 5px;
                        margin-top: 33px;
                        cursor: pointer;
                    }
                    .down {
                        display: block;
                        width: 30px;
                        height: 30px;
                        background: #ebf0f1 url(./images/trans-arrow.png) no-repeat center center;
                        @include rotate(180deg);
                        cursor: pointer;
                    }
                }
            }
            .bt {
                text-align: center;
                border-top: 1px solid $borderColor;
                padding: 9px 0;
                button {
                    font-size: 14px;
                }
            }
        }
    }

    .gridTableDemo-spin-col {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        text-align: center;
        height: 100px;
        margin-left: -100px;
        margin-top: -50px;
        box-shadow: 0 0 8px #ddd;
        border-radius: 3px;
        .demo-spin-icon-load {
            animation: ani-demo-spin 1s linear infinite;
        }
        @keyframes ani-demo-spin {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    }
</style>
